<template>
  <div class="container">
    <div class="app-container">
      <div class="role-operator">
        <el-button size="mini" type="primary" @click="showDialog = true">添加角色</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" border :header-cell-style="{background:'#f5f6f8',color:'#909399'}">
        <el-table-column type="index" width="50" align="center" label="序号">
          <template v-slot="scope">
            {{ (pager.page - 1) * pager.pagesize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" width="200" align="center" label="角色">
          <template v-slot="{row}">
            <el-input v-if="row.isEdit" v-model="row.editRow.name" size="mini" />
            <span v-else>
              {{ row.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="state" width="200" align="center" label="启用">
          <template v-slot="{row}">
            <el-switch
              v-if="row.isEdit"
              v-model="row.editRow.state"
              :active-value="1"
              :inactive-value="0"
            />
            <span v-else>{{ row.state === 1?'已启用':row.state === 0?'未启用':'无' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" align="center" label="描述">
          <template v-slot="{row}">
            <el-input
              v-if="row.isEdit"
              v-model="row.editRow.description"
              type="textarea"
              :rows="2"
            />
            <span v-else>{{ row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{row}">
            <div v-if="row.isEdit">
              <el-button size="mini" type="primary" @click="editRole(row)">提交</el-button>
              <el-button size="mini" @click="row.isEdit = false">取消</el-button>
            </div>
            <div v-else>
              <el-button type="text" size="small" @click="handlePermission(row.id)">分配权限</el-button>
              <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
              <el-popconfirm
                title="确定删除该角色吗？"
                style="margin-left: 10px;"
                @onConfirm="handleDel(row.id)"
              >
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :page-size="5"
          :pager-count="7"
          layout=" prev, pager, next"
          :total="total"
          :current-page="pager.page"
        />
      </div>
    </div>
    <!-- 新增角色 -->
    <el-dialog
      title="新增角色"
      :visible.sync="showDialog"
      width="30%"
    >
      <el-form ref="form" :model="roleForm" label-width="120px" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input id="name" v-model="roleForm.name" style="width: 80%" size="small" />
        </el-form-item>
        <el-form-item label="启用" prop="state">
          <el-switch
            v-model="roleForm.state"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            id="introduce"
            v-model="roleForm.description"
            style="width: 80%"
            type="textarea"
            :rows="4"
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button size="mini" type="primary">提交</el-button>
              <el-button size="mini">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    <SetPermission ref="setPermission" />-->
  </div>
</template>
<script>
// import { getRolesList, delRole, addRole, editRole } from '@/api/role'
// import SetPermission from './components/SetPermission.vue'
export default {
  name: 'Role',
  components: {
    // SetPermission
  },
  data() {
    return {
      loading: false,
      showDialog: false,
      tableData: [],
      roleForm: {
        name: '',
        description: '',
        state: 0
      },
      total: 0,
      pager: {
        page: 1,
        pagesize: 5
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 10, message: '角色名称应该为2-10个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
          { min: 2, max: 10, message: '角色描述应该为1-100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // this.getRolesList()
  },
  methods: {}
}
</script>
<style scoped>
.role-operator {
  padding: 10px;
}

.pagination {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
